<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:painting-marker-01-f </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/painting.html#Markers">11.6 Markers</a></p>
 <p>
				<a href="full-masking-path-05-f.html">masking-path-05-f ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-painting-marker-02-f.html">→ painting-marker-02-f</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>painting-marker-01-f</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/painting-marker-01-f.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/painting-marker-01-f.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of painting-marker-01-f" src="../png/full-painting-marker-01-f.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>Tests the basic support for markers. For the three tests, there 
			should be two identical paths with markers drawn. The path on the left is 
			rendered using the marker elements. The path on the right is rendered using 
			the equivalent SVG, showing what the marked path should look like. 
			</p>
			<p>
			The top test examines the basic support for the marker element and style. The markers are red rectangles. 
			</p>
			<p>
			The middle test examines the support for the different styles of marker properties. The 
			"marker-start" property defines the marker to use at the first vertex of the marked path,
			 in this case a red rectangle. The "marker-end" property defines the marker to use at the
			  last vertex of the marked path, in this case a blue triangle. The "marker-mid" property 
			  defines the marker to use at all vertices, other than the first and last, of the marked path, 
			  in this case a green circle. 
			</p>
			<p>The bottom test examines the support for marker orientation along the 
			path direction. The second vertex, the top right corner of the path, has a marker that 
			is rotated 45 degrees, since that is the average of the horizontal and vertical segments 
			each side. The last vertex, the bottom right corner of the path, has a marker rotated 90 
			degrees since that is the direction of the last path segment. 
			</p>
			<p>
				The rendered picture should match the reference image, except for possible
				variations in the labelling text (per CSS2 rules).  
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="full-masking-path-05-f.html">masking-path-05-f ←</a>
				<a href="full-index.html">index</a>
				<a href="full-painting-marker-02-f.html">→ painting-marker-02-f</a>
						</p></div>
</body>
</html>
